import BaseVue from '@/lib/base/BaseVue';
import Component from 'vue-class-component';
import styles from './LoadingView.module.less';
import { Prop } from 'vue-property-decorator';

@Component
export default class extends BaseVue {
    @Prop({
        default: true
    })
    private show!: boolean;

    @Prop({
        default: '0.5rem'
    })
    private size!: string;

    @Prop({
        default: '#999'
    })
    private color!: string;

    public render() {
        return (
            <span staticClass={styles.app} class={{ [styles.hide]: !this.show }}>
                <svg t="1587112027261" class={styles.loading} fill={this.color} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" width={this.size} height={this.size}><path d="M874.666667 533.333333l-192 0c-12.8 0-21.333333-8.533333-21.333333-21.333333 0-12.8 8.533333-21.333333 21.333333-21.333333l192 0c12.8 0 21.333333 8.533333 21.333333 21.333333C896 524.8 887.466667 533.333333 874.666667 533.333333zM648.533333 407.466667c-8.533333 8.533333-21.333333 8.533333-29.866667 0-8.533333-8.533333-8.533333-21.333333 0-29.866667l136.533333-136.533333c8.533333-8.533333 21.333333-8.533333 29.866667 0 8.533333 8.533333 8.533333 21.333333 0 29.866667L648.533333 407.466667zM512 896c-12.8 0-21.333333-8.533333-21.333333-21.333333l0-192c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333l0 192C533.333333 887.466667 524.8 896 512 896zM512 362.666667c-12.8 0-21.333333-8.533333-21.333333-21.333333L490.666667 149.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333l0 192C533.333333 354.133333 524.8 362.666667 512 362.666667zM270.933333 782.933333c-8.533333 8.533333-21.333333 8.533333-29.866667 0s-8.533333-21.333333 0-29.866667l136.533333-136.533333c8.533333-8.533333 21.333333-8.533333 29.866667 0 8.533333 8.533333 8.533333 21.333333 0 29.866667L270.933333 782.933333zM375.466667 407.466667l-136.533333-136.533333c-8.533333-8.533333-8.533333-21.333333 0-29.866667s21.333333-8.533333 29.866667 0l136.533333 136.533333c8.533333 8.533333 8.533333 21.333333 0 29.866667C398.933333 413.866667 384 413.866667 375.466667 407.466667zM362.666667 512c0 12.8-8.533333 21.333333-21.333333 21.333333L149.333333 533.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333 0-12.8 8.533333-21.333333 21.333333-21.333333l192 0C354.133333 490.666667 362.666667 499.2 362.666667 512zM648.533333 616.533333l136.533333 136.533333c8.533333 8.533333 8.533333 21.333333 0 29.866667-8.533333 8.533333-21.333333 8.533333-29.866667 0l-136.533333-136.533333c-8.533333-8.533333-8.533333-21.333333 0-29.866667C625.066667 610.133333 640 610.133333 648.533333 616.533333z" p-id="2185"></path></svg>
                <span staticClass={styles.text} class={{ [styles.hide]: !this.$slots.default }} style={{ color: this.color }}>
                    {this.$slots.default}
                </span>
            </span>
        )
    }
}
